<template>
  <div class="plan-container">
    <!-- 顶部层级 -->
    <header class="header">
      <h2>制定计划</h2>
      <p class="current-dream">当前梦想: {{ currentDream || '暂无梦想' }}</p>
    </header>

    <!-- 次级导航层 -->
    <nav class="nav">
      <router-link to="/dream">梦想描绘</router-link>
      <router-link to="/tasks">分解设计</router-link>
      <router-link to="/plan">制定计划</router-link>
      <router-link to="/execute">执行计划</router-link>
    </nav>

    <!-- 核心内容层（三栏布局） -->
    <main class="main-content">
      <div class="task-list">
        <h3>任务列表</h3>
        <ul>
          <li v-for="(task, index) in tasks" :key="index">
            <div v-if="typeof task === 'object'">
              <p>任务名称: {{ task.taskName }}</p>
              <p>任务描述: {{ task.taskDescription }}</p>
              <p>需要时间: {{ task.requiredTime }} 分钟</p>
            </div>
            <div v-else>
              {{ task }}
            </div>
          </li>
        </ul>
      </div>

      <div class="plan-input">
        <h3>计划详情</h3>
        <select v-model="selectedTask">
          <option value="">选择任务</option>
          <option v-for="(task, index) in tasks" :key="index" :value="task.xrwID">
            {{ typeof task === 'object' ? task.taskName : task }}
          </option>
        </select>
        <textarea v-model="newPlan" placeholder="输入计划详情..."></textarea>
        <button @click="savePlan">保存计划</button>
        <div v-if="plans.length">
          <h3>已保存计划</h3>
          <ul>
            <li v-for="(plan, index) in plans" :key="index">
              {{ plan.plan }} - 任务: {{ typeof tasks[plan.taskId] === 'object' ? tasks[plan.taskId].taskName : tasks[plan.taskId] }}
              <button @click="removePlan(plan.id)">删除</button>
            </li>
          </ul>
        </div>
      </div>
    </main>

    <!-- 底部固定层 -->
    <footer class="footer">
      <p>© 2025 22215120229罗智韬 为梦成真开发者</p>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDream: localStorage.getItem('dream') || '',
      currentTask: localStorage.getItem('currentTask') || '',
      tasks: [],
      plans: [],
      newPlan: '',
      selectedTask: ''
    }
  },
  methods: {
    savePlan() {
      if (this.newPlan && this.selectedTask !== '') {
        const newPlanId = Date.now()
        const selectedTaskObj = this.tasks.find(task => 
          typeof task === 'object' && task.xrwID === this.selectedTask
        )
        this.plans.push({
          id: newPlanId,
          taskId: this.selectedTask,
          dreamId: selectedTaskObj ? selectedTaskObj.dreamId : '',
          plan: this.newPlan
        })
        localStorage.setItem('plans', JSON.stringify(this.plans))
        this.newPlan = ''
      }
    },
    removePlan(id) {
      const index = this.plans.findIndex(plan => plan.id === id)
      if (index !== -1) {
        this.plans.splice(index, 1)
        localStorage.setItem('plans', JSON.stringify(this.plans))
      }
    }
  },
  mounted() {
    this.currentDream = localStorage.getItem('dream') || ''
    this.currentTask = localStorage.getItem('currentTask') || ''
    const savedTasks = localStorage.getItem('tasks')
    if (savedTasks) {
      this.tasks = JSON.parse(savedTasks)
    }
    const savedPlans = localStorage.getItem('plans')
    if (savedPlans) {
      this.plans = JSON.parse(savedPlans)
    }
  }
}
</script>

<style scoped>
.plan-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(135deg, rgb(170, 207, 252), rgb(187, 208, 251), rgb(178, 236, 248));
}
.header {
  background: linear-gradient(135deg, rgb(170, 207, 252), rgb(187, 208, 251), rgb(178, 236, 248));
  padding: 20px;
  backdrop-filter: blur(5px);
}
.current-dream {
  font-style: italic;
}
.nav {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(5px);
}
.nav a {
  text-decoration: none;
  color: #333;
}
.main-content {
  display: flex;
  flex: 1;
  gap: 20px;
  padding: 20px;
}
.task-list {
  flex: 1;
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  backdrop-filter: blur(5px);
  text-align: left;
}
.task-list ul {
  list-style: none;
  padding: 0;
}
.plan-input {
  flex: 2;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  backdrop-filter: blur(5px);
}
.plan-input select {
  margin: 10px 0;
  padding: 10px;
}
.plan-input textarea {
  flex: 1;
  margin: 10px 0;
  padding: 10px;
}
.footer {
  text-align: center;
  padding: 10px;
  background: linear-gradient(135deg, rgb(170, 207, 252), rgb(187, 208, 251), rgb(178, 236, 248));
  backdrop-filter: blur(5px);
}
</style>